<script setup>
import { ref } from 'vue';

const active = ref('home');

const images = [
    '/assets/apple-1.jpeg',
    '/assets/apple-2.jpeg',
];
</script>

<template>
    <van-nav-bar title="标题">
        <template #right>
            <van-icon name="search" size="18" />
        </template>
    </van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
        </van-swipe-item>
    </van-swipe>
    <van-grid style="margin-top: 10px" :gutter="10">
        <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
    </van-grid>
    <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
</template>

<style scoped>
.my-swipe .van-swipe-item {
    height: 180px;
}
</style>
